<template>
	<view>
		<!--添加地址-->
		<view class="top">
			<image src="/static/Liu/userimg/ykfc.png"></image>
			<view class="add" @click="addNewAddress()">
				<text>添加新地址</text>
			</view>
		</view>
		<!--地址详情-->
		<view class="addressDetail" v-for="item in addressList" :key="item.id">
			<view class="detailName">
				<text>{{item.name}}</text>
			</view>
			<view class="detailTel">
				<text>{{item.tel}}</text>
			</view>
			<view class="detailAddress">
				<text>{{item.address}}</text>
			</view>
			<view class="fengexian"></view>
			<view class="update">
				<view class="moren">
					<checkbox-group @click="changeMoren(item.addressId)" >
						<checkbox :value="item.addressId+''" :checked="item.status==0?true:false" >默认地址</checkbox>
					</checkbox-group>
				</view>
				<view class="bianji" @click="updateAddress(item)">
					<text class="icon">&#xe67d;编辑</text>
				</view>
				<view class="shanchu" v-if="item.status==0?false:true" @click="shanchu(item.addressId)">
					<text class="icon">&#xe69c;删除</text>
				</view>
				<view class="xuanze" @click="chooseGoPay(item)">
					<text class="icon">&#xe8ad;选择</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId:null,
				addressList:[],
				//当前默认status为0的addressId
				morenAddressId:null,
				//当前点击的addressId
				dianjiAddressId:null,
				//要删除的地址id
				addressId:null,
				//用户信息
				user:{
					
				}
			}
		},
		onLoad() {
			//获取用户信息
			// uni.getStorage({
			// 	key:"user",
			// 	success: (res) => {
			// 		this.user=res.data;
			// 	}
			// })
			//同步获取缓存
			const value=uni.getStorageSync("user");
			this.user=value;
			
			this.userId=this.user.userId;
			this.getAddressList();
		},
		onShow() {
			this.getAddressList();
		},
		methods: {
			//获取地址集合方法
			getAddressList(){
				uni.request({
					url:this.webUrl+"selectAllUserAddressByUserId",
					data:{
						'userId':this.userId
					},
					success: (res) => {
						this.addressList=res.data.list;
						//获取默认地址的addressId
						for(var i=0;i<this.addressList.length;i++){
							if(this.addressList[i].status==0){
								this.morenAddressId=this.addressList[i].addressId;
								break;
							}
						}
					},
					fail: (err) => {
						uni.showToast({
							title:"获取用户地址失败"
						})
					}
				})
			},
			changeMoren(addressId){
				//给点击的addressId赋值
				this.dianjiAddressId=addressId;
				//如果点击的是原来的,直接回到上页面
				if(this.dianjiAddressId==this.morenAddressId){
					uni.showToast({
						title:"该地址已是默认地址"
					})
					return;
				}
				//更改默认
				for(var i=0;i<this.addressList.length;i++){
					if(this.addressList[i].addressId!=this.dianjiAddressId){
						this.$set(this.addressList[i],'status',1);
					}else{
						this.$set(this.addressList[i],'status',0);
					}
				}
				//更改数据库
				uni.request({
					url:this.webUrl+"/updateUserMorenAddress",
					data:{
						'newAddress':this.dianjiAddressId,
						'oldAddress':this.morenAddressId
					},
					success: (res) => {
						if(res.data.code=='200'){
							//更该默认的addressId为当前点击的addressId
							this.morenAddressId=this.dianjiAddressId;
							console.log(this.addressList);
							uni.showToast({
								title:"默认地址已更改"
							})
						}else{
							uni.showToast({
								title:"默认地址失败"
							})
						}
					},
					fail: (err) => {
						uni.showToast({
							title:"默认地址失败"
						})
					}
				})
				
			},
			//选择地址后,跳转到订单确认页面,
			//存入缓存将该地址传递过去,
			//在确认订单页面调用onShow()进行加载获取
			chooseGoPay(item){
				uni.setStorage({
					key:"xuanzeid",
					data:item
				})
				 uni.navigateBack({
					 delta:1
				 });
			},
			//添加新地址
			addNewAddress(){
				uni.navigateTo({
					url:"/pages/liu/addAddress/addAddress"
				})
			},
			//删除
			shanchu(addressId){
				this.addressId=addressId;
				uni.request({
					url:this.webUrl+"deleteAddress",
					data:{
						'addressId':addressId
					},
					success: (res) => {
						if(res.data.code=="200"){
							uni.showToast({
								title:"已删除该地址"
							})
							//刷新地址集合
							this.getAddressList();
						}
					}
				})
			},
			//更改地址信息
			updateAddress(item){
				uni.setStorage({
					key:"addressInfo",
					data:item
				})
				uni.navigateTo({
					url:"/pages/liu/updateAddress/updateAddress"
				})
			}
			
		}
		
	}
</script>

<style lang="scss">
	page{
		background-color: rgb(220,220,220);
	}
	.top{
		position: relative;
		width: 100%;
		height: 280rpx;
		background-color: white;
		margin-bottom: 4rpx;
		image{
			width: 100%;
			height: 280rpx;
		}
		.add{
			width: 160rpx;
			height: 48rpx;
			border-radius: 9rpx;
			background-color: rgb(148,102,102);
			position: absolute;
			font-size: 28rpx;
			left: 295rpx;
			top: 192rpx;
			color: white;
			text-align: center;
		}
	}
	//地址详情
	.addressDetail{
		float: left;
		width: 100%;
		height: 230rpx;
		background-color: white;
		margin-top:10rpx ;
		.detailName{
			float: left;
			width: 30%;
			height: 70rpx;
			line-height: 70rpx;
			font-size:28rpx ;
			text{
				margin-left: 30rpx;
			}
		}
		.detailTel{
			float: left;
			width: 70%;
			height: 70rpx;
			line-height: 70rpx;
			font-size:28rpx ;
			text{
				margin-left: 300rpx;
			}
		}
		.detailAddress{
			float: left;
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			font-size:28rpx ;
			text{
				margin-left: 30rpx;
			}
		}
		.fengexian{
			float: left;
			width: 100%;
			height: 1rpx;
			background-color: rgb(230,230,230);
		}
		.update{
			float: left;
			width: 100%;
			height: 89rpx;
			line-height: 89rpx;
			.moren{
				float: left;
				width: 46%;
				height: 89rpx;
				font-size: 28rpx;
				line-height: 89rpx;
				color: rgb(148,102,102);
				checkbox-group{
					margin-left: 20rpx;
				}
			}
			.bianji{
				float: left;
				width: 18%;
				height: 89rpx;
				line-height: 89rpx;
				text-align: center;
				color: rgb(148,102,102);
				text{
					font-size: 28rpx;
				}
			}
			.shanchu{
				float: left;
				width: 18%;
				height: 89rpx;
				line-height: 89rpx;
				text-align: center;
				color: rgb(148,102,102);
				text{
					font-size: 28rpx;
				}
			}
			.xuanze{
				float: left;
				width: 18%;
				height: 89rpx;
				line-height: 89rpx;
				text-align: center;
				color: rgb(148,102,102);
				text{
					font-size: 28rpx;
				}
			}

		}
		
	}
</style>
